import { style } from '@vanilla-extract/css';
import { vars } from '../global.css';

export const PADDING = 0.6;
export const LINE_HEIGHT = 1.5;

export const textareaStyle = style({
	display: 'inline-flex',
	border: `1px solid ${vars.color.border}`,
	borderRadius: vars.layout.smallRadius,
	transition: 'border-color .2s',
	fontSize: '1rem',
	lineHeight: `${LINE_HEIGHT}rem`,
	padding: `${PADDING}em ${PADDING}em`,
	boxSizing: 'border-box',
	width: '20em',
	outline: 'none',
	resize: 'none',
	overflow: 'hidden',
	color: vars.color.regularText,
	backgroundColor: vars.color.baseBackground,
	selectors: {
		'&[resize=auto]': {
			overflow: 'hidden',
			resize: 'none',
		},
		'&[resize=manual]': {
			overflow: 'auto',
			resize: 'vertical',
		},
		'&:focus': {
			border: `1px solid ${vars.color.brand}`,
		},
		'&.invalid': {
			borderColor: vars.color.danger,
			color: vars.color.danger,
		},
		'&[disabled]': {
			color: vars.color.disabledText,
			cursor: 'not-allowed',
			backgroundColor: vars.color.disableBackground,
			border: `1px solid ${vars.color.border}`,
		},
		'&::-webkit-input-placeholder': {
			color: vars.color.placeholderText,
		},
	},
});
